<script setup lang="ts">
import { ref } from 'vue';

const onClickItem = (item, index) => {
  // alert(index);
  console.log('onClickItem', item, index);
};

const list = ref([
  {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
    historyArray: ['A', 'B'],
  },
  {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
  },
  {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
  },
]);

const onLoad = (index: number, val: string) => {
  console.log(`onLoad:${val}`);
  debugger;
  const currentList = list.value[index];
  currentList.loading = true;

  setTimeout(() => {
    // debugger;
    if (currentList.refreshing) {
      currentList.items = [];
      currentList.refreshing = false;
    }

    for (let i = 0; i < 10; i++) {
      const text = currentList.items.length + 1;
      // currentList.items.push(text < 10 ? '0' + text : String(text));
      currentList.items.push({
        title: `title_${i}`,
        thumb:
          'https://camo.githubusercontent.com/3f50c01f4ac4cce54ef4c19f0c961a1366ad573224bd6d986de120a3b496d92c/68747470733a2f2f63646e2e7175617361722e6465762f73706f6e736f72732f6d696f2d61622e737667',
        na1: '那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。',
        co1: text,
      });
    }

    currentList.loading = false;
    currentList.refreshing = false;

    // show error info in second demo
    if (index === 1 && currentList.items.length === 10 && !currentList.error) {
      currentList.error = true;
    } else {
      currentList.error = false;
    }

    if (currentList.items.length >= 100) {
      currentList.finished = true;
    }
  }, 1000);
};

const onRefresh = (index: number, val: string) => {
  console.log(`onRefresh:${val}`);
  list.value[index].finished = false;
  // list.value[index].loading = true;
  onLoad(index, val);
};
</script>

<template>
  <div>
    <div class="tr-label-prefix-wraper tr-label-prefix-wraper-left">
      <span class="tr-label-prefix">
        <span class="t-label"> 仅搜索图表 </span>
      </span>
      <t-popup-search
        :totalCount="list[0].items.length"
        itemTemplate="custom"
        :loading="list[0].loading"
        :finished="list[0].finished"
        :error="list[0].error"
        v-model:refreshing="list[0].refreshing"
        :finished-text="'finishedText'"
        @load="val => onLoad(0, val)"
        @refresh="val => onRefresh(0, val)"
        :rows="list[0].items"
        @clickItem="onClickItem"
      >
        <template v-slot="row">
          <div>{{ row }}----</div>
        </template>
      </t-popup-search>
    </div>
  </div>
</template>

<style lang="less"></style>
